<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>编辑个人资料-知乎</title>

    <!-- rel="icon"	在sheet页中显示图标。-->
    <link rel="icon" href="/static/images/logo.jpg" type="image/x-icon">

    <link rel="stylesheet" href="/static/css/edit.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/dailog.css">
    <script src="/static/js/edit.js"></script>
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">

</head>
<body>
<header>
    <div class="header-inner">
        <div class="peologo"></div>
        <div class="menu">
            <a href="#" style="cursor:pointer;">首页</a>
            <a href="#" style="cursor:pointer;">发现</a>
            <a href="/app1/topic/" style="cursor:pointer;">话题</a>
        </div>
        <div class="search">
            <form action="">
                <input class="search-input" type="text" placeholder="搜索你感兴趣的内容..."/>
                <div class="searbtn"></div>
            </form>
        </div>
        <div class="btnwen" onclick="quiz()">提问</div>
        <div class="info">
            <a href="#" class="userinfo">
                <span class="icon-bell-alt icon-large"></span>
            </a>
            <a href="#" class="userinfo">
                <span class="icon-comments icon-large"></span>
            </a>
            <a href="/app1/index/" class="userinfo"><img src="{{ user_photo|default:'/static/images/userinfo.jpg'}}" class="icon"/></a>
            <a href="/app1/login/" class="userinfo">退出</a>
        </div>
    </div>
</header>
<!-- 知乎头部开始 -->
<div class="header" hidden>
    <div class="wrap">
        <div class="col-2">
            <div class="logo"></div>
        </div>
        <div class="col-6">
            <div class="search">
                <form action="">
                    <input class="search-input" type="text" placeholder="搜索你感兴趣的内容"/>
                    <div class="searbtn"></div>
                </form>
            </div>
        </div>
        <div class="col-2">
            <div class="menu">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="topic.html">话题</a></li>
                    <li><a href="#">发现</a></li>
                    <li><a href="#">消息</a></li>
                    <li><a href="#">我</a></li>
                </ul>
            </div>
        </div>

        <input type="tel">

        <div class="info">
            <a href="#" class="userinfo">
                <span> {{ user_name }}</span>
                /<img src="/static/images/userinfosmall.jpg" alt="{{ user_name }}"/>
            </a>
            <ul class="down">
                <li><a href="#">我的主页</a></li>
                <li><a href="#">私信</a></li>
                <li><a href="#">设置</a></li>
                <li><a href="#">退出</a></li>
            </ul>
        </div>
        <div class="btnwen btn" onclick="quiz()">提问</div>
    </div>
</div>


<!-- 知乎头部结束 -->
<div class="main">
    <div><h1>{{ img.url }}</h1></div>
    <div style="display: none">
        <form action="" method="post" enctype="multipart/form-data" id="photo">
            <input type="file" name="photo" id="upload" onchange="doupload()">
        </form>
    </div>
    <div class="card">
        <div class="usercover">
            <span class="camra2"><i class="fa fa-camera" aria-hidden="true"></i></span>
            <button class="icon-camera">&nbsp;&nbsp;编辑封面图片</button>
        </div>

        <div class="peopleinfo">

            <div class="photo" style="background-image: url('{{ user_photo|default:'/static/images/userinfo.jpg'}}'); background-repeat: no-repeat; background-size: 100%;" id="background">
                <div class="camra" onclick="upload()"><i class="fa fa-camera fa-2x" aria-hidden="true"></i></div>

                <span class="xiugaizi" onclick="upload()">修改我的头像</span>
            </div>
            <h1 class="mar-zuo">
                {{user_name}}<a href="/app1/index/" class="back">返回我的主页<span class="icon-angle-right"></span></a>
            </h1>

            <!-- 点击修改按钮后，内容可以修改 -->
            <!-- 处理思路：去掉所有个人信息中的disabled和readonly属性 -->
            <button class="modify" onclick="savedata()">
                <span class="icon-save">保存</span>
            </button>
            <button class="modify" onclick="modify()">
                <span class="icon-edit">修改</span>
            </button>
        </div>
        <form id="personinfoform" enctype="multipart/form-data">
        <div class="intruduce">
            <div class="xinxi">
                <div class="fild">
                    <h3 class="fildlabel">性别</h3>
                    <div class="fildcontent">
                        <input class="att" name="sex" type="radio" name="sex" value="male" disabled {% if user_gender %} checked {% endif %}/>男
                        <input class="att" id="sex" type="radio" name="sex" value="female" disabled {% if user_gender == False %} checked {% endif %}/>女
                    </div>
                </div>
                <div class="fild">
                    <h3 class="fildlabel">居住地</h3>
                    <div class="fildcontent">
                        <!-- 省市二级连动 -->
                        <!-- 处理思路：通过select标记的onchange事件，根据省名添加市名的option选项 -->
                        <select name="province" id="province" class="select fildtext att" disabled
                                onchange="shengshi()">
                            <option value="湖北省" {% if user_address_province == '湖北省' %} selected {% endif %}>湖北省</option>
                            <option value="陕西省" {% if user_address_province == '陕西省' %} selected {% endif %}>陕西省</option>
                            <option value="辽宁省" {% if user_address_province == '辽宁省' %} selected {% endif %}>辽宁省</option>
                            <option value="吉林省" {% if user_address_province == '吉林省' %} selected {% endif %}>吉林省</option>
                            <option value="黑龙江省" {% if user_address_province == '黑龙江省' %} selected {% endif %}>黑龙江省</option>
                        </select>

                        <select name="city" id="city" class="select fildtext att" disabled>
                            <option value="{{ user_address_city }}">{{ user_address_city }}</option>
                        </select>
                    </div>
                </div>
                <div class="fild">
                    <h3 class="fildlabel">所在行业</h3>
                    <div class="fildcontent">
                        <input class="fildtext att" name ="job" id="job" readonly="true" value="{{user_industry|default:'暂未填写'}}"/>
                    </div>
                </div>
                <div class="fild">
                    <h3 class="fildlabel">邮箱</h3>
                    <div class="fildcontent">
                        <input class="fildtext att" name="email" id="email" readonly="true" value="{{user_email|default:'暂未填写'}}"/>
                    </div>
                </div>
                <div class="fild">
                    <h3 class="fildlabel">教育经历</h3>
                    <div class="fildcontent">
                        <input class="fildtext att" name="education" id="education" readonly="true" value="{{user_education|default:'暂未填写'}}"/>
                    </div>
                </div>
                <div class="fild">
                    <h3 class="fildlabel">出生年月</h3>
                    <div class="fildcontent">
                        <input type="date" name="birthday" id="birthday" readonly="true" class="fildtext att" value="{{ user_birthday }}"/>
                    </div>
                </div>
                <div class="fild">
                    <h3 class="fildlabel">电话</h3>
                    <div class="fildcontent">
                        <input class="fildtext att" name="phone" id="phone" readonly="true" value="{{user_phone|default:'暂未填写'}}"/>
                    </div>
                </div>
                <div class="fild">
                    <h3 class="fildlabel">个人简介</h3>
                    <div class="fildcontent">
                        <textarea class="fildtext att" name="introduce" id="introduce" readonly="true" rows="3"
                                  cols="30">{{user_introduce|default:'这家伙很懒，啥也没说'}}</textarea>
                    </div>
                </div>
            </div>
        </div>
        </form>
        <div class="save-btn">
            <button class="save" id="save" hidden onclick="save()">保存</button>
        </div>
    </div>
</div>
<!-- ----- 提问的弹出框 ----- -->
<div class="Modal-wrapper" id="Modal-wrapper">
    <div class="Modal-backdrop"></div>
    <div class="Modal-large">
        <div class="Modal-inner">

            <!-- 点击关闭按钮，调用hideModel函数 -->
            <span class="guanbi" onclick="closeWin()">X</span>

            <h3 class="Modal-title">写下你的问题</h3>
            <div class="Modal-subtitle">描述精确的问题更易得到解答</div>
            <div class="Modal-content">
                <div class="askquestion">
                    <form action="">
                        <div class="QuestionAsk-section">
                            <div class="asktitle">
                                <textarea required="required" rows="2" class="Input" placeholder="问题标题"></textarea>
                            </div>
                        </div>
                        <div class="QuestionAsk-section">
                            <div class="asktitle">
                                <input class="Input" type="text" placeholder="添加话题"/><span class="icon-search"></span>
                            </div>
                        </div>
                        <div class="QuestionAsk-section">
                            <div class="askhead">问题描述(可选)：</div>
                            <div class="asktitle">
                                <textarea required="required" rows="2" class="Input" placeholder="问题背景、条件等详细信息"></textarea>
                            </div>
                        </div>
                        <div class="QuestionAsk-section">
                            <div class="chec"><input type="checkbox" class="checkbox"/>匿名提问</div>
                        </div>
                        <div class="tijiao">
                            <button class="tijiaobtn">提交问题</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 提问的弹出框结束 -->
</body>

</html>